@import "../../both/mixin";
.datatable_container.bln{

  @include cf(".table_ctrl");
  .table_ctrl{
    margin-top : 15px;

    ul{
      display: block;
      list-style: none;

      li{
        display: block;
        float : left;
        padding: 0px 2px;
      }

      a{
        text-decoration: none;
        color : inherit;
        display: block;
      }
    }

    ul.table_ctrl_operator{
      float:left;

      li:first-child{
        padding-right : 5px;
        padding-left : 0px;
      }

      div.default{
        border : 1px solid #005da8;
        background: #2277da;
        color : white;
        font-size : 12px;
        padding : 4px 15px;
        border-radius : 2px;
      }

      div.default:hover{
        background:#006ba2;
      }

      div.more{
        border :1px solid #c5c6c7;
        color : #171d25;
        font-size : 12px;
        padding : 4px 15px;
        border-radius : 2px;
      }

      div.more:hover{
        background-color : #F2F2F2;
      }

      div.op{
        background : #2277da;
        border : 1px solid #d5d5d5;
        color : white;
        cursor: pointer;
        font-size : 12px;
        padding : 4px 15px;
        border-radius : 2px;
      }

      div.disable:hover{
        background : #e8e8e8;
        border : 1px solid #d5d5d5;
        color : #a2a2a2;
        cursor: not-allowed;
      }

      div.disable{
        background : #e8e8e8;
        border : 1px solid #d5d5d5;
        color : #a2a2a2;
        cursor: not-allowed;
        font-size : 12px;
        padding : 4px 15px;
        border-radius : 2px;
      }
    }

    ul.table_ctrl_operator_fr{
      float:right;

      li:first-child{
        div.input_wr{
          width : 240px;
          height : 26px;
          border: 1px solid #b4b7bf;
          padding : 0px 5px;
          padding-right : 26px;
          position: relative;
          border-top-right-radius: 2px;
          border-bottom-right-radius: 2px;
        }

        input[type="text"]{
          width : 240px - 10px - 26px;
          height : 22px;
          border : 0;
          text-decoration: none;
          outline : none;
          position: relative;
          z-index: 0;
          background-color : transparent;
        }

        input[type="text"]:focus{
          text-decoration: none;
          outline : none;
        }

        div.search_btn{
          border: 0;
          border-left : 1px solid #d1d2d3;
          position : absolute;
          top: 0;
          right : 0;
        }
      }

      div.operator_icon{
        font-size : 16px;
        color : #71A9E0;
        padding: 1px;
        height : 24px;
        width : 26px;
        text-align: center;
        line-height : 24px - 2px;
        background-color: #fcfcfc;
        cursor: pointer;
        border : 1px solid #d1d2d3;
      }

      div.operator_icon:hover{
        background-color: #f2f2f2;
        border-color : #b4b7bf;
      }
    }
  }

  .datatable_cr{
    padding : 10px 0px;

    div.head_wrap{
      background-color: #f6f8fa;
      border: 1px solid #D1D5DE;
      border-right : 0;
      border-left : 0;
    }

    table.datatable{
      font-size : 12px;
      width : 100%;
      border-collapse : collapse;

      thead{
        td{
          position: relative;
          a{
            text-decoration: none;
            color : inherit;
            display: block;
          }
          span.sort_icon{
            display: inline-block;
            padding-left : 1px;
          }

          i.fa-angle-down,i.fa-angle-up{
            position: absolute;
          }
          i.fa-angle-down{
            bottom: 6px;
          }
          i.fa-angle-up{
            top: 6px;
          }

          div.thead_item{
            cursor: pointer;
          }
        }

      }

      td{
        min-width : 30px;
        font-size : 0;

        div.item{
          font-size : 12px;
          display: inline-block;
          width : 100%;
          word-break: break-all;
          white-space: normal;
        }
      }

      tr{
        outline: 0;
      }

      thead {
        tr{
          height : 30px;
        }

        td{
          &:first-child{
            padding-left : 10px;
          }

          div.item{
            font-weight : bold;
            word-break: break-all;
            white-space: normal;
          }
        }
      }

      tbody{
        td {
          padding : 10px 0;

          &:first-child{
            padding-left : 10px;
          }
        }

        tr{
          border-bottom: 1px solid #E6EBF2;
        }

        tr:hover{
          background-color: #EAF3FD;
        }

        tr.selected{
          background-color: #EAF3FD;
        }
      }

      .datatable_img{
        width : 120px;
        height : auto;
        max-height : 300px;
      }

      label{
        display: inline-block;
        width : 16px;
      }
    }
  }

  a{
    text-decoration: none;
    color : #71A9E0;
  }

  input[type="checkbox"]{
    display: none;
  }

  .radio_input{
    display:inline-block;
    height:16px;
    margin-right:10px;
    margin-top:-1px;
    vertical-align:middle;
    width:16px;
    line-height:1;
    background-color:#ffffff;
    border: 1px solid rgba(0,0,0,0.15);
  }

  input[type="checkbox"]:checked + .radio_input:after{
    content: '\2714';     // 对号
    top: 0px;
    left: 0px;
    color: #758794;
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 1px 0 0 0;
    vertical-align: top;
  }

  .data_wrap{
    height : 600px;
    overflow : auto;
    border-bottom: 1px solid #D1D5DE;
  }

  colgroup{
    display: table-column-group;

    col{
      display: table-column;
    }
  }

  @include cf("div.page_ctrl");
  div.page_ctrl{
    margin: 20px 0;
    font-size : 14px;

    .page_state{
      color : #a2a2a2;
      float : left;
      height: 30px;
      line-height : 30px;
    }

    .fr{
      float: right;
      line-height : 30px;
    }

    .page_select{
      float : left;
    }

    .page_options{
      float: left;
      height : 30px;
      line-height : 30px;

      span.page_text{
        margin-right : 10px;
      }

      a.page_filter_elem{
        text-decoration: none;
        color : inherit;
        display: inline-block;
        padding : 0px 10px;
        height : 30px;
        border: 1px solid #d1d2d3;
      }

      a.page_filter_elem.disable{
        color : #a2a2a2;
        cursor: not-allowed;
      }
    }
  }
}

.img_op_cr{
  position: relative;
  width : 200px;
  height : auto;
  text-align: center;

  img.img_thumb{
    width : 200px;
    height : auto;
  }

  .img_mask_op{
    display: none;
    position: absolute;
    bottom: 0;
    top : 0;
    width : 200px;
  }

  .img_mask_op:hover{
    display: block;
  }

  img:hover + .img_mask_op{
    display: block;
  }

  .img_op{
    position: absolute;
    z-index : 100002;
    width : 200px;
    height : 34px;
    transform: translate(-100px,-17px);
    top : 50%;
    left : 50%;

    .btn{
      position: relative;
    }
  }

  .img_mask{
    position: absolute;
    top : 0;
    left : 0;
    right : 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.5;
  }
}